<!doctype html>
<head>
    <meta charset="utf-8"/>
    <style>
        .canvas-container {
            height: 100px;
            width: 450px;
            border: 2px solid black;
        }
        #a1 {
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="canvas-container">
        <canvas id="a1" class="canvas-loading" width="450px" height="100px">
        </canvas>
    </div>
    <script>
        var animateIt = function(canvasNode, config) {

            var canvas = canvasNode.getContext('2d');
            
            for(var k in config) {
            console.log(k);
                if(config.hasOwnProperty(k) && canvas[k] !== undefined) {
                    canvas[k] = config[k]; 
                }
            }
            
            var proxy = function(x) {
                return canvas[x].bind(canvas);
            };     
            
            var moveTo = proxy('moveTo');
            var lineTo = proxy('lineTo');
            var fillText = proxy('fillText');
            var measureText = proxy('measureText');
            var beginPath = proxy('beginPath');
            var closePath = proxy('closePath');
            var arc = proxy('arc');
            var clearRect = proxy('clearRect');
            
            // 指定区域 居中绘制文字
            var fillTextCenter = function(words, x1, y1, x2, y2) {
                var width = x2 - x1, height = y2 - y1;
                canvas.textBaseline = "middle";
                fillText(words, x1 + width / 2 - measureText(words).width / 2, y1 + height / 2);
                canvas.stroke();
            }
            
            // 绘制实心圆形
            var drewCircle = function(x, y, r) {
                beginPath();
                arc(x, y, r, 0, Math.PI * 2, true);
                closePath();   
                canvas.fill();
            }

            return {
                cl: clearRect,    
                tx: fillTextCenter,
                cr: drewCircle,
                mt: measureText,
            };
        };
    
        var area = document.querySelector('#a1');
        
        var aha = animateIt(area, { font: '55px Arial', strokeStyle: 'black', fillStyle: 'grey' });
        
        var w = [ 320, 340, 360, 380 ];
        
        aha.tx("少女祈祷中", 0, 0, 300, 100);
        
        var dp = function(w) {
            aha.tx('.', w, 0, w + 16, 100);
        }
        
        var dc = function(x) {
            aha.cr(x + 5, 50, 5);
        }
        
        var timer = setInterval(function() {
        
            aha.cl(300, 0, 450, 100);
            
            for(var i = 0; i < w.length; ++i) {

                dc(w[i]);
                
                if(w[i] <= 320 || w[i] >= 390) w[i] += 5; else w[i] += 2;
                
                if(w[i] >= 410) w[i] = 300;
            }
            
        }, 25);
        
    </script>
</body>